<template>
  <div class="pHeader">
    <div class="headerIcon">
      <van-icon name="arrow-left" size="25" @click="toHome" />
      <van-icon name="comment-o" size="25" />
    </div>
    <div class="headerNoLogin" v-if="login === false">
      <div class="noLoginTitle">悠悠行旅，乐在旅途</div>
      <div class="noLoginButton">
        <button class="loginRegister" @click="toLogin" >登录/注册</button>
        <button class="loginRegister phoneSelect">手机号查单</button>
      </div>
    </div>
    <div class="headerLogin" v-else>
      <div class="loginHeader">
        <div class="headerLoginImage">
          <van-image width="72" round height="72" src="./images/image.jpg" />
        </div>
        <h1 class="loginName" style="margin-top: -.2rem">
          尊贵的会员
        </h1>
        <div class="headerLoginTop">
          <span class="loginTopUp">
            <van-icon name="medal-o" size="16px" class="iconLeft" />
            领会员福利
          </span>
          <span class="loginTopDown">
            <van-icon name="friends-o" size="16px" class="iconLeft"/>
            我的社区
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonHeader",
  data() {
    return {
      login: true
    }
  },
  methods: {
    toHome(){
      this.$router.push("/")
    },
    toLogin() {
      this.$router.push("/login")
    }
  }
}
</script>

<style scoped>
.headerIcon {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 92%;
  left: 4%;
  top: 1%;
  padding: .2rem 0rem;
  z-index: 100;
  color: #ffffff;
}
.headerNoLogin {
  height: 56px;
  padding: 60px 70px 40px 70px;
  background: #1a67a5 url("/images/person/personHeader.jpg");
  background-size: 100% 100%;
  z-index: 2;
  text-align: center;
}
.loginHeader {
  margin-top: .3rem;
}
.noLoginTitle {
  text-align: center;
  font: 18px/1 "Microsoft Yahei";
  color: #ffffff;
  padding-bottom: 20px;
}
.noLoginButton {
  display: flex;
  justify-content: space-between;
}
.loginRegister {
  width: 120px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  border-radius: 50px;
  background-color: #1E9FFF;
  -webkit-tap-highlight-color: #01AAED;
}
.phoneSelect {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.5);
  height: 34px;
  line-height: 34px;
}

.headerLogin {
  padding-top: 80px;
  background: #1a67a5 url("/images/person/personHeader.jpg");
  background-size: 100% 100%;
  z-index: 2;
  text-align: center;
}
.headerLoginTop {
  position: relative;
  height: 48px;
  line-height: 48px;
  vertical-align: middle;
  left: 0;
  right: 0;
  top: 10px;
  background: #fff;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.headerLoginTop:before {
  position: relative;
  left: 16px;
  right: 16px;
  bottom: 0;
  content: '';
  height: 1px;
  background: #efefef;
}
.loginTopUp, .loginTopDown {
  display: inline-block;
  height: 23px;
  line-height: 23px;
  padding: 0 10px 0 7px;
  border-radius: 50px;
  font-size: 12px;
  margin-right: 10px;
}
.loginTopUp {
  background: rgba(17,166,255,0.1);
  color: #5e8aa6;
}
.loginTopDown {
  background: rgba(247,148,100,0.15);
  color: #967363;
  letter-spacing: 0;
  line-height: 24px;
}
.iconLeft {
  left: 0;
  top: 3px;
}
.headerLoginImage {
  position: absolute;
  z-index: 14;
  left: 16px;
  top: 66px;
  background: #ffffff;
  border-radius: 50%;
  padding: 2px;
  box-sizing: border-box;
}

.loginName {
  margin-top: -.2rem;
  padding-left: 103px;
  text-align: left;
  font: 17px/1 ' PingFangSC-Regular', "Microsoft Yahei";
  color: #ffffff;
}
</style>